<template>
	<view>
		<view>
			<view class="box-bg">
				<uni-nav-bar height="5vh" title="在线办卡" />
			</view>
		</view>
		<view class="card">
			<image :src="cardDetail.image"></image>
			<text class="card-name">{{cardDetail.name}}</text>
			<text class="card-type">{{cardDetail.type}}</text>
			<text class="card-price">¥{{cardDetail.price}}</text>
		</view>
		<view>
			<uni-list-item title="卡片id" :rightText="cardDetail.id" />
			<uni-list-item title="卡片名称" :rightText="cardDetail.name" />
			<uni-list-item title="卡片价格" :rightText="cardDetail.price" />
			<uni-list-item title="有效天数" :rightText="cardDetail.day" />
			<uni-list-item title="是否在售" :rightText="cardDetail.status" />
			<uni-list-item title="卡片描述" :rightText="cardDetail.description" />
		</view>
		<view class="goods-carts" v-if="status==''">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
		<view class="classList">
			<view class="classList-top">
				支持课程
			</view>
			<view  v-for="item in classList" class="classList-item">
				•  {{item}}
			</view>
		</view>
	</view>
</template>

<script>
	import { getCardById } from '../../api/card';
import { getClassByCardTags } from '../../api/class';
import { chooseCard } from '../../api/user';
import {baseUrl} from '../../config';
import cardDetailVue from './cardDetail.vue';
	export default {
		data() {
			return {
				cardDetail: {},
				options: [{
					icon: 'chat',
					text: '咨询'
				}],
				buttonGroup: [{
					text: '立即购买',
					backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
					color: '#fff'
				}],
				classList:[],
				status:""
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			buttonClick(e) {
				// var params={
				// 	id:uni.getStorageSync('auth'),
				// 	name:this.cardDetail.name
				// }
				// chooseCard(this.cardDetail.id,params).then(res=>{
				// 	console.log(res);
				// 	if(res.data.msg==null){
				// 		uni.showToast({
				// 			title:"办卡成功"
				// 		})
				// 	}else{
				// 		uni.showToast({
				// 			title:res.data.msg,
				// 			icon:"error"
				// 		})
				// 	}
				// })
				// uni.requestPayment({
				//     provider: 'alipay',
				//     orderInfo: 'orderInfo', //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
				//     success: function (res) {
				//         console.log('success:' + JSON.stringify(res));
				//     },
				//     fail: function (err) {
				//         console.log('fail:' + JSON.stringify(err));
				//     }
				// });
				var userId={id:uni.getStorageSync("auth")}
				var cardId=this.cardDetail.id
				chooseCard(cardId,userId).then(res=>{
					console.log(res);
					if(res.data.code==1){
						uni.showToast({
							title:res.data.data,
							icon:"success"
						})
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:"error"
						})
					}
				})
			}
		},
		onLoad(options) {
			this.status=options.status
			console.log(this.status);
			getCardById(options.id).then(res=>{
				console.log(res);
				if(res.data.data!=null){
					this.cardDetail = res.data.data
					res.data.data.image=baseUrl+"/common/download?name="+res.data.data.image
					if (res.data.data.type == "期限卡") {
						res.data.data.type = "期"
					} else if (res.data.data.type == "储值卡") {
						res.data.data.type = "储"
					} else if (res.data.data.type == "次卡") {
						res.data.data.type = "次"
					}
					if (res.data.data.status == 1) {
						res.data.data.status = "在售"
					} else if (res.data.data.status == 0) {
						res.data.data.status = "停售"
					}
					if(res.data.data.tags!=null){
						getClassByCardTags(res.data.data.tags).then(res=>{
							this.classList=res.data.data
						})
					}
				}
			})
		}
	}
</script>

<style>
	.card {
		width: 80%;
		background-size: 100%;
		margin: auto;
		margin-top: 2vh;
		position: relative;
		height: 25vh
	}

	.card image {
		height: 23vh;
		width: 100%;
		border-radius: 2vh;
		z-index: 1;
		position: absolute;

	}

	.card text {
		position: absolute;
		z-index: 2;
	}

	.card-name {
		font-size: 2.5vh;
		font-weight: bold;
		color: seagreen;
		position: absolute;
		top: 3.5vh;
		left: 2.5vh;
		font-family: "";
	}

	.card-type {
		font-size: 3vh;
		position: absolute;
		right: 2vh;
		top: 2.5vh;
		color: #FCF7F3;
	}

	.card-price {
		font-size: 2vh;
		color: ghostwhite;
		position: absolute;
		top: 17vh;
		font-weight: bold;
		left: 3vh;
	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}
	.classList{
		background-color: white;
		margin-top: 2vh;
		padding: 2vh;
	}
	.classList-top{
		font-size: 3vh;
		font-weight: bold;
	}
	.classList-item{
		background-color: white;
		margin: 1vh 0;
		height: 2vh;
		line-height: 2vh;
		padding: 1vh;
		list-style: circle;
	}
</style>